<template>
	<view class="ww">
		<view class="tianjia">
			<button @click="open" class="tianjiafenlei">添加分类</button>
		</view>
		<view class="biao">
			<view class="table-header">
				<text>编号</text>
				<text>分类名称</text>
				<text>排序</text>
				<text>操作</text>
			</view>
			<view>
				<scroll-view class="primary" scroll-y>
				      <view v-for="(item, index) in categoryList" :key="item.id" class="item" @tap="activeItem(index)" :class="{ active: index === activeIndex }">
				        <text class="name">{{ item.id }}</text>
				        <text class="name">{{ item.tname }}</text>
				        <text class="name">{{ item.num }}</text>
				       <view class="anniu">
						   <button class="bianji" style="width: 80rpx; height: 50rpx; font-size: 10px;" @click="gai(item)">改</button>
						   <button class="shanchu" style="width: 80rpx; height: 50rpx; font-size: 10px;" @click="shan(item)">删</button>
					   </view>
				      </view>
				    </scroll-view>
			</view>
		</view>
		<uni-popup ref="popup" :mask-click="false">
		<uni-popup-dialog  title="添加分类" value="tname" @confirm="dialogInputConfirm(tname)">
			<uni-forms  :modelValue="tname">
				<uni-forms-item label="商品名" required>
					<uni-easyinput v-model="tname.tname"/>
				</uni-forms-item>
			</uni-forms>
		</uni-popup-dialog>
	</uni-popup>
	<uni-popup ref="popup02" :mask-click="false">
		<uni-popup-dialog  title="编辑" @confirm="bianjiwan(categorybianji)">
			<uni-forms  :modelValue="categorybianji">
				<uni-forms-item label="商品名" required>
					<uni-easyinput v-model="categorybianji.tname"  />
				</uni-forms-item>
				<uni-forms-item label="排序" required>
					<uni-easyinput v-model="categorybianji.num" />
				</uni-forms-item>
			</uni-forms>
			</uni-popup-dialog>
	</uni-popup>
	</view>
	<!-- 删除 -->
	<view v-if="showDialog" class="dialog">
	      <view class="dialog-content">
			  <view>
				  <text>确定要删除吗？</text>
			  </view>
			<view class="qrenshanchu">
				<button class="handleConfirm" style="width: 100rpx; height: 60rpx; font-size: 10px;" @click="handleConfirm()">确认</button>
	        <button class="handleCancel" style="width: 100rpx; height: 60rpx; font-size: 10px;" @click="handleCancel">取消</button>
			</view>
	        
	      </view>
	   
	  </view>
</template>

<script setup>
import { ref } from 'vue';
	import {http} from '/until/request.js'
import {onLoad} from '@dcloudio/uni-app'
// 控制删除框的显示和隐藏
const showDialog = ref(false);
const popup=ref(false)
const popup02=ref(false)
	const categoryList=ref([])
	const categorybianji=ref({
		id:'',
		tname:'',
		num:''
	})
	const tname=ref({
		tname:''
	})
	const num=ref(null)
	const activeIndex=ref(0);
	
	const activeItem=(index)=>{
		activeIndex.value=index;
		//可以在这里添加其他逻辑，列如更新数据等
	}
	//商品分类
	const spfl=async()=>{
		let ll=await http({
			url:'/lft/stypes/strpe',
			menubar:'get'
		})
		console.log(ll.data)
		categoryList.value=ll.data
	}
	const open=(position)=>{
		 popup.value.open(position);
	}
	const close = () => {
	  popup.value.close();
	};
	
	const nn=ref({
		id:0,
		tname:'',
		num:0,
		id2:0,
		num2:0
	});
	const gai=(position)=>{
		
		console.log(position)
		num.value=position.num
		categorybianji.value.id=position.id
		//修改的id
		nn.value.id=position.id
		categorybianji.value.tname=position.tname
		
		console.log(categorybianji.value.tname)
		categorybianji.value.num=position.num
		//修改完的排序
		nn.value.num=position.num
		console.log(nn.value)
		spfl();
		popup02.value.open(position);
		
	}
	const bianjiwan=async(xx)=>{
		console.log(xx)
		const originalNum = categoryList.value.num; // 获取原始 num 值
		nn.value.id2=xx.id
		nn.value.tname=xx.tname
		nn.value.num2=xx.num
		
		for(let i=0;i<categoryList.value.length;i++){
			let ii=categoryList.value[i].num
			
			if(ii==xx.num){
				categoryList.value[i].num=num.value
			}
		}
		categoryList.value.num = xx.num;
		console.log(1)
		const ww=xx
		let ll=await http({
			url:'/lft/stypes/update',
			method:'post',
			data:nn.value
		})
	}
	//新增
	const dialogInputConfirm=async(tn)=>{
		console.log(tn)
		const t=tn;
		let ll=await http({
			url:'/lft/stypes/add/'+tn.tname,
		})
		console.log(ll)
		if(ll.code==200){
			uni.showToast({
			  title: '添加成功',
			  icon: 'success',
			  duration: 2000
			  })
			  setTimeout(() => {
			             uni.navigateTo({
			                 url: '/pages/supplier/wjk/catetory',
			             });
			         }, 500); // 确保延迟时间与 duration 一致
		}else{
			uni.showToast({
			  icon: 'error',
			  duration: 2000,
			  })
		}
	}
	const shanchuid=ref(null)
	// 显示删除框
	const shan = (item) => {
		console.log(item)
		shanchuid.value=item.id
	  showDialog.value = true;
	};
	
	// 处理确认删除的逻辑
	const handleConfirm = async() => {
		console.log(11)
	  let res=await http({
	  		  url:"/lft/stypes/goodsid/"+shanchuid.value
	  })
	  
	  console.log(res)
	  if(res.data.length==0){
		  console.log("=====")
		let ll=await http({
				  url:"/lft/stypes/delete/"+shanchuid.value,
		})
		console.log(ll)
		if(ll.code==200){
				  uni.showToast({
					title: ll.data,
					icon: 'success',
					duration: 2000
				  });
				  setTimeout(() => {
				             uni.navigateTo({
				                 url: '/pages/supplier/wjk/catetory',
				             });
				         }, 500); // 确保延迟时间与 duration 一致
				 spfl()
		}else{
				  uni.showToast({
					title: "删除失败",
					icon: 'error',
					duration: 2000
				  });
		}
	  }else{
		 uni.showToast({
			title: "分类下还有商品,无法删除",
			icon: 'error',
			duration: 2000
		 }); 
	  }
	  
	  // 在这里添加删除逻辑
	  showDialog.value = false;
	};
	
	// 处理取消删除的逻辑
	const handleCancel = () => {
	  console.log('取消删除');
	  showDialog.value = false;
	};
	onLoad(()=>{
		spfl()
	})
</script>

<style scoped>
	.ww{
		margin-top: 50rpx;
		width: 100%;
		height: 100vh;
	}
	.table-header {
	  display: flex;
	  justify-content: space-around;
	  padding: 10px;
	  background-color: #f0f0f0;
	  border-bottom: 1px solid #ccc;
	  font-weight: bold;
	}
	
	.header-item {
	  flex: 1;
	  text-align: center;
	}
	
	.primary {
	  height: 300px; /* 设置滚动视图的高度 */
	  border: 1px solid #ccc;
	  margin-top: 10px;
	  overflow-y: auto;
	}
	
	.item {
	  display: flex;
	  justify-content: space-between;
	  padding: 10px;
	  border-bottom: 1px solid #eee;
	}
	
	.item.active {
	  background-color: #f0f0f0;
	}
	
	.name {
	  flex: 1;
	  text-align: center;
	}
	
	.anniu {
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	  flex: 1;
	}
	
	.edit-button, .delete-button {
	  padding: 5px 10px;
	  margin: 0 5px;
	  font-size: 14px;
	  border: none;
	  border-radius: 4px;
	  cursor: pointer;
	}
	
	.edit-button {
	  background-color: #4CAF50;
	  color: white;
	}
	
	.delete-button {
	  background-color: #F44336;
	  color: white;
	}
	.bianji{
		background-color: #0496d9;
				color: white;
	}
	.shanchu{
				background-color: #15B54A;
				background: rgba(255, 0, 0, 0.3);
				color: #FF0000
	}
	.tianjiafenlei{
		background-color: #0496d9;
				color: white;
				width: 700rpx;
	}
	.dialog {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: rgba(0, 0, 0, 0.5);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.dialog-content {
		border: 2rpx solid black;
		width: 500rpx;
	  background: white;
	  padding: 20px;
	  border-radius: 8px;
	  text-align: center;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;
	}
	.qrenshanchu{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	
	.dialog-content p {
	  margin-bottom: 10px;
	}
	
	.dialog-content button {
		
	  margin: 5px;
	  padding: 5px 10px;
	  border: none;
	  border-radius: 4px;
	  cursor: pointer;
	}
	.handleConfirm{
				background-color: #0496d9;
					color: white;
	}
	.handleCancel{
			background-color: #e23633;
			color: white;
	}
	
	

</style>
